<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue';

import { onMounted, reactive, ref } from 'vue';

import { message } from 'ant-design-vue';

// 表单引用
const formRef = ref<FormInstance>();

// 保存状态
const saving = ref(false);

// 表单数据
const formData = reactive({
  hospitalName: '',
  deanName: '',
  contactPerson: '',
  contactPhone: '',
  province: '',
  city: '',
  district: '',
  detailedAddress: '',
  useSmsName: false,
  smsHospitalName: '',
  legalPersonPhone: '',
});

// 地区数据
const provinces = ref([
  { code: '110000', name: '北京市' },
  { code: '120000', name: '天津市' },
  { code: '130000', name: '河北省' },
  { code: '140000', name: '山西省' },
  { code: '150000', name: '内蒙古自治区' },
  { code: '210000', name: '辽宁省' },
  { code: '220000', name: '吉林省' },
  { code: '230000', name: '黑龙江省' },
  { code: '310000', name: '上海市' },
  { code: '320000', name: '江苏省' },
  { code: '330000', name: '浙江省' },
  { code: '340000', name: '安徽省' },
  { code: '350000', name: '福建省' },
  { code: '360000', name: '江西省' },
  { code: '370000', name: '山东省' },
  { code: '410000', name: '河南省' },
  { code: '420000', name: '湖北省' },
  { code: '430000', name: '湖南省' },
  { code: '440000', name: '广东省' },
  { code: '450000', name: '广西壮族自治区' },
  { code: '460000', name: '海南省' },
  { code: '500000', name: '重庆市' },
  { code: '510000', name: '四川省' },
  { code: '520000', name: '贵州省' },
  { code: '530000', name: '云南省' },
  { code: '540000', name: '西藏自治区' },
  { code: '610000', name: '陕西省' },
  { code: '620000', name: '甘肃省' },
  { code: '630000', name: '青海省' },
  { code: '640000', name: '宁夏回族自治区' },
  { code: '650000', name: '新疆维吾尔自治区' },
]);

const cities = ref<Array<{ code: string; name: string }>>([]);
const districts = ref<Array<{ code: string; name: string }>>([]);

// 表单验证规则
const formRules = {
  contactPerson: [
    { required: true, message: '请输入联系人姓名',trigger: 'blur' },
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话',trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
    },
  ],
  legalPersonPhone: [
    { required: true, message: '请输入法人联系电话',trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
    },
  ],
  smsHospitalName: [
    { min: 3,max: 8, message: '短信医院名称长度为3-8个字符',trigger: 'blur' },
  ],
};

// 省份变化处理
const handleProvinceChange = (provinceCode: string) => {
  formData.city = '';
  formData.district = '';
  cities.value = [];
  districts.value = [];

  // 模拟加载城市数据
  if (provinceCode) {
    // 这里应该根据省份代码加载对应的城市数据
    // 暂时使用模拟数据
    cities.value = [
      { code: '110100', name: '北京市' },
      { code: '120100', name: '天津市' },
      { code: '130100', name: '石家庄市' },
      { code: '130200', name: '唐山市' },
      { code: '130300', name: '秦皇岛市' },
    ];
  }
};

// 城市变化处理
const handleCityChange = (cityCode: string) => {
  formData.district = '';
  districts.value = [];

  // 模拟加载区县数据
  if (cityCode) {
    // 这里应该根据城市代码加载对应的区县数据
    // 暂时使用模拟数据
    districts.value = [
      { code: '110101', name: '东城区' },
      { code: '110102', name: '西城区' },
      { code: '110105', name: '朝阳区' },
      { code: '110106', name: '丰台区' },
      { code: '110107', name: '石景山区' },
    ];
  }
};

// 保存处理
const handleSave = async () => {
  try {
    await formRef.value?.validate();
    saving.value = true;

    // 模拟保存请求
    await new Promise((resolve) => setTimeout(resolve, 1000));

    message.success('医院信息保存成功');

    // 这里可以添加实际的保存逻辑
    console.log('保存的医院信息:', formData);
  } catch (error) {
    console.error('表单验证失败:', error);
  } finally {
    saving.value = false;
  }
};

// 页面加载时初始化数据
onMounted(() => {
  // 模拟加载已有的医院信息
  // 这里应该从API获取数据
  Object.assign(formData, {
    hospitalName: '爱宠宠物医院',
    deanName: '张医生',
    contactPerson: '李护士',
    contactPhone: '13800138000',
    province: '110000',
    city: '110100',
    district: '110105',
    detailedAddress: '朝阳区建国路88号爱宠大厦1层',
    useSmsName: true,
    smsHospitalName: '爱宠医院',
    legalPersonPhone: '13900139000',
  });

  // 初始化地区数据
  handleProvinceChange('110000');
  handleCityChange('110100');
});
</script>

<template>
  <div class="hospital-info-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">医院信息</h1>
      <div class="status-info">
        <a-icon type="file-text" class="status-icon" />
        <span class="status-text">未开通认证授权</span>
      </div>
    </div>

    <!-- 医院信息表单 -->
    <div class="form-container">
      <a-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        layout="vertical"
        class="hospital-form"
      >
        <div class="form-row">
          <!-- 左列 -->
          <div class="form-column">
            <!-- 医院名称 -->
            <a-form-item label="医院名称" name="hospitalName">
              <a-input
                v-model:value="formData.hospitalName"
                placeholder="请输入医院名称"
                size="large"
              />
            </a-form-item>

            <!-- 院长姓名 -->
            <a-form-item label="院长姓名" name="deanName">
              <a-input
                v-model:value="formData.deanName"
                placeholder="请输入院长姓名"
                size="large"
              />
            </a-form-item>

            <!-- 联系人 -->
            <a-form-item label="联系人" name="contactPerson" required>
              <a-input
                v-model:value="formData.contactPerson"
                placeholder="请输入联系人姓名"
                size="large"
              />
            </a-form-item>

            <!-- 联系电话 -->
            <a-form-item label="联系电话" name="contactPhone" required>
              <a-input
                v-model:value="formData.contactPhone"
                placeholder="请输入联系电话"
                size="large"
              />
            </a-form-item>

            <!-- 所在区域 -->
            <a-form-item label="所在区域" name="region">
              <div class="region-selector">
                <a-select
                  v-model:value="formData.province"
                  placeholder="请选择省份"
                  size="large"
                  style="width: 33%"
                  @change="handleProvinceChange"
                >
                  <a-select-option
                    v-for="province in provinces"
                    :key="province.code"
                    :value="province.code"
                  >
                    {{ province.name }}
                  </a-select-option>
                </a-select>
                <a-select
                  v-model:value="formData.city"
                  placeholder="请选择城市"
                  size="large"
                  style="width: 33%"
                  :disabled="!formData.province"
                  @change="handleCityChange"
                >
                  <a-select-option
                    v-for="city in cities"
                    :key="city.code"
                    :value="city.code"
                  >
                    {{ city.name }}
                  </a-select-option>
                </a-select>
                <a-select
                  v-model:value="formData.district"
                  placeholder="请选择区县"
                  size="large"
                  style="width: 33%"
                  :disabled="!formData.city"
                >
                  <a-select-option
                    v-for="district in districts"
                    :key="district.code"
                    :value="district.code"
                  >
                    {{ district.name }}
                  </a-select-option>
                </a-select>
              </div>
            </a-form-item>

            <!-- 详细地址 -->
            <a-form-item label="详细地址" name="detailedAddress">
              <a-textarea
                v-model:value="formData.detailedAddress"
                placeholder="如道路,门牌号,小区,楼栋号,单元号"
                :rows="3"
                size="large"
              />
            </a-form-item>
          </div>

          <!-- 右列 -->
          <div class="form-column">
            <!-- 短信医院名称 -->
            <a-form-item label="短信医院名称" name="smsHospitalName">
              <div class="sms-name-container">
                <a-checkbox
                  v-model:checked="formData.useSmsName"
                  style="margin-right: 8px"
                >
                  使用短信医院名称
                </a-checkbox>
                <a-input
                  v-model:value="formData.smsHospitalName"
                  placeholder="限3-8个字符"
                  size="large"
                  :disabled="!formData.useSmsName"
                  :maxlength="8"
                  show-count
                />
                <a-tooltip title="短信医院名称用于发送短信时显示">
                  <a-icon type="question-circle" class="help-icon" />
                </a-tooltip>
              </div>
            </a-form-item>

            <!-- 法人联系电话 -->
            <a-form-item label="法人联系电话" name="legalPersonPhone" required>
              <a-input
                v-model:value="formData.legalPersonPhone"
                placeholder="请输入法人联系电话"
                size="large"
              />
            </a-form-item>
          </div>
        </div>

        <!-- 保存按钮 -->
        <div class="form-actions">
          <a-button
            type="primary"
            size="large"
            :loading="saving"
            @click="handleSave"
          >
            保存
          </a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<style scoped>
/* 响应式设计 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 24px;
  }

  .region-selector {
    flex-direction: column;
    gap: 8px;
  }

  .region-selector .ant-select {
    width: 100% !important;
  }

  .sms-name-container {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

.hospital-info-page {
  min-height: 100vh;
  padding: 24px;
  background: #f5f5f5;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.status-info {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.status-icon {
  color: #999;
}

.form-container {
  padding: 32px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.hospital-form {
  max-width: 1200px;
}

.form-row {
  display: flex;
  gap: 48px;
}

.form-column {
  flex: 1;
  min-width: 0;
}

.region-selector {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sms-name-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.help-icon {
  font-size: 16px;
  color: #1890ff;
  cursor: pointer;
}

.form-actions {
  padding-top: 24px;
  margin-top: 32px;
  border-top: 1px solid #e8e8e8;
}
</style>
